<!doctype html>
<html lang="en">
<head>
    <th:block th:include="include :: header('首页')" />
</head>
<style>
    body,html{
        width:100%;
        height:100%;
        margin:0;font-family:"Microsoft YaHei"
    }
    #mapDiv{
        width:100%;height:400px
    }
    input,b,p{
        margin-left:5px;
        font-size:14px
    }
    .result {
        display: none;
        font-size: 12px;
        border: 1px solid #999999;
        line-height: 27px;
        padding-left: 7px;

    }
</style>

<body>
<div id="mapDiv"></div>
<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        标注 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" id="markerDropdown">
    </ul>

    <input type="button" value="测距开启" onClick="lineTool.open();"/>
    <input type="button" value="测距关闭" onClick="lineTool.close();"/>
</div>
<div >
    搜索内容：<input type="text" id="keyWord" value="KFC"/>
    <input type="button" onClick="localsearch.searchInBounds(document.getElementById('keyWord').value,bounds)" value="搜索"/>
    <br/>
    <!-- 提示词面板 -->
    <div id="promptDiv" class="prompt"></div>
    <!-- 统计面板 -->
    <div id="statisticsDiv" class="statistics"></div>
    <!-- 搜索结果面板 -->
    <div id="resultDiv" class="result">
        <div id="searchDiv"></div>
        <div id="pageDiv">
            <input type="button" value="第一页" onClick="localsearch.firstPage()"/>
            <input type="button" value="上一页" onClick="localsearch.previousPage()"/>
            <input type="button" value="下一页" onClick="localsearch.nextPage()"/>
            <input type="button" value="最后一页" onClick="localsearch.lastPage()"/>
            <br/>
            转到第<input type="text" value="1" id="pageId" size="3"/>页
            <input type="button" onClick="localsearch.gotoPage(parseInt(document.getElementById('pageId').value));"
                   value="转到"/>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/data/points-sample-data.js"></script>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=a8a12cfa715fc66fc68965cfd8e28371"></script>
<script>
    var prefix_marker = ctx + "gis/marker"
    var prefix_marker_record = ctx + "gis/markerrecord"

    var map
    var zoom = 11.5;
    var pointArray = [];
    var localsearch;
    var bounds;
    var infoWin;
    var wmsLayer;

    var config = {
        showLabel: true,
        pageCapacity: 6,	//每页显示的数量
        onSearchComplete: localSearchResult	//接收数据的回调函数
    };

    //创建标注工具对象，测距离
    var lineTool;
    // var localsearch;
    function onLoad() {
        console.log("OnLoading....");
        //初始化地图对象
        map = new T.Map("mapDiv");
        //设置显示地图的中心点和级别
        map.centerAndZoom(new T.LngLat(116.96568,36.614613), zoom);
        //创建切换地图类型对象

        //获取GeoServer的高分图像
        getWMS('OneMap:济南市中区','http://localhost:8081/geoserver/OneMap/wms');
        // getWMS('LRRL,LRDL','http://gisserver.tianditu.gov.cn/TDTService/wfs');

        var mapOptions = [
            {
                title: '地图', //地图控件上所要显示的图层名称
                icon:'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地图控件上所要显示的图层图标（默认图标大小80x80）
                layer: TMAP_NORMAL_MAP //地图类型对象，即MapType。
            },
            {
                title: '卫星自制',
                icon:' http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
                layer: wmsLayer
            },
            {
                title: '卫星混合',
                http: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
                layer: TMAP_HYBRID_MAP
            },
            {
                title: '地形混合',
                icon:' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png',
                layer: TMAP_TERRAIN_HYBRID_MAP
            }
        ]
        var ctrl = new T.Control.MapType(mapOptions);
        //添加控件(地图类型)
        map.addControl(ctrl);
        <!--放大缩小全局-->
        var Menu = new T.ContextMenu({
            width: 50
        });
        var _MenuItem2 = new T.MenuItem("放大", zoomIn);
        Menu.addItem(_MenuItem2);
        var _MenuItem3 = new T.MenuItem("缩小", zoomOut);
        Menu.addItem(_MenuItem3);
        var _MenuItem4 = new T.MenuItem("全图", fullextent);
        Menu.addItem(_MenuItem4);
        map.addContextMenu(Menu);

        lineTool = new T.PolylineTool(map, config);

        /*获取标注类别信息*/
        $.ajax({
            type: "POST",
            url: prefix_marker+"/list",
            success: function(data){
                console.log(data)
                for(var i = 0; i < data.total; i++){
                    //添加标注类别按钮
                    $('#markerDropdown').append("<li><a href='javascript:void(getMarkerRecord("+data.rows[i].id+"));'>"+data.rows[i].markerName+"</a></li>");
                }
            },
            error: function(){
                alert("查询失败");
            }
        });
        //创建搜索对象
        localsearch = new T.LocalSearch(map, config);

        bounds = new T.LngLatBounds(new T.LngLat(116.96568,36.614613), new T.LngLat(117.059998,36.675681));
        //创建矩形
        createRect();
    }

    //获取标记信息
    function getMarkerRecord(markerId){
        //清楚地图的标记物
        map.clearOverLays();
        //获取标记记录
        $.ajax({
            type: "POST",
            url: prefix_marker_record+"/list",
            data:{
                "markerId": markerId
            },
            success: function(data){
                for(var i = 0; i < data.total; i++){
                    addMarkerRecord(data.rows[i],i)
                }
                // 让所有点在视野范围内
                map.setViewport(pointArray);
            },
            error: function(){
                alert("查询失败");
            }
        });
    }

    function addMarkerRecord(markerRecord,index){
        console.log(markerRecord);
        var icon = new T.Icon({
            iconUrl: markerRecord.markerIcon,
            iconSize: new T.Point(50, 50),
            iconAnchor: new T.Point(10, 25)
        });

        var marker = new T.Marker(new T.LngLat(markerRecord.longitude,markerRecord.latitude));  // 创建标注
        marker.setIcon(icon);

        var content = markerRecord.recordName;

        map.addOverLay(marker);               // 将标注添加到地图中
        pointArray[index] = new T.LngLat(markerRecord.longitude,markerRecord.latitude)
        // marker.addEventListener("click",attribute);
        addClickHandler(content,marker);
    }

    <!--添加标注-->
    // document.getElementById('xueXiao').onclick=function (){
    //     var pointArray = new Array();
    //     for(var i=0;i<data_info.length;i++){
    //         var marker = new T.Marker(new T.LngLat(data_info[i][0],data_info[i][1]));  // 创建标注
    //         var content = data_info[i][2];
    //         map.addOverLay(marker);               // 将标注添加到地图中
    //         pointArray[i] = new T.LngLat(data_info[i][0], data_info[i][1]);
    //         marker.addEventListener("click",attribute);
    //         addClickHandler(content,marker);
    //     }
        //让所有点在视野范围内
    //     map.setViewport(pointArray);
    //
    // }

    //获取标记位置
    // function attribute(e){
    //     var p = e.target;
    //     alert("当前的位置是" + p.getLngLat().lng + "," + p.getLngLat().lat);
    // }
    function addClickHandler(content,marker){
        marker.addEventListener("click",function(e){
            openInfo(content,e)}
        );
    }
    function openInfo(content,e){
        var point = e.lnglat;
        marker = new T.Marker(point);// 创建标注
        var markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-30)}); // 创建信息窗口对象
        map.openInfoWindow(markerInfoWin,point); //开启信息窗口
    }

    //添加放大zoomout，缩小zoomin,全图
    function zoomIn(e) {
        map.zoomIn();
    }

    function zoomOut(lnglat) {
        map.zoomOut();
    }
    function fullextent() {
        map.fullextent();
    }

    //获取WMS图层
    function getWMS(layers,url) {
        var config = {
            version: "1.1.1",	//请求服务的版本
            layers: layers,
            transparent: true,	//输出图像背景是否透明
            styles: "",			//每个请求图层的用","分隔的描述样式
            format: "image/jpeg",	//输出图像的类型
            srs: "EPSG:4610"
        };
        wmsLayer = new T.TileLayer.WMS(url, config);
    }



    <!--区域内搜索-->
    function localSearchResult(result) {
        //清空地图及搜索列表
        clearAll();

        //创建矩形
        createRect();

        //根据返回类型解析搜索结果
        switch (parseInt(result.getResultType())) {
            case 1:
                //解析点数据结果
                pois(result.getPois());
                break;
            case 2:
                //解析统计城市
                statistics(result.getStatistics());
                break;
        }
    }

    //解析点数据结果
    function pois(obj) {
        if (obj) {
            //显示搜索列表
            var divMarker = document.createElement("div");
            //坐标数组，设置最佳比例尺时会用到
            for (var i = 0; i < obj.length; i++) {
                //闭包
                (function (i) {
                    //名称
                    var name = obj[i].name;
                    //地址
                    var address = obj[i].address;
                    //坐标
                    var lnglatArr = obj[i].lonlat.split(" ");
                    var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);

                    var winHtml = "地址:" + address;

                    //创建标注对象
                    var marker = new T.Marker(lnglat);
                    //地图上添加标注点
                    map.addOverLay(marker);
                    marker.addEventListener("click", function () {
                        this.showPosition(marker, name, winHtml);

                    }, this)
                    //在页面上显示搜索的列表
                    var a = document.createElement("a");
                    a.href = "javascript://";
                    a.innerHTML = name;
                    a.onclick = function () {
                        showPosition(marker, name, winHtml);
                    }
                    divMarker.appendChild(document.createTextNode((i + 1) + "."));
                    divMarker.appendChild(a);
                    divMarker.appendChild(document.createElement("br"));
                })(i);
            }
            //显示搜索结果
            divMarker.appendChild(document.createTextNode('共' + localsearch.getCountNumber() + '条记录，分' + localsearch.getCountPage() + '页,当前第' + localsearch.getPageIndex() + '页'));
            document.getElementById("searchDiv").appendChild(divMarker);
            document.getElementById("resultDiv").style.display = "block";
        }
        else {
            alert("无结果");
        }
    }

    function showPosition(marker, name, winHtml) {
        if (infoWin) {
            map.removeOverLay(infoWin);
            infoWin = null;
        }
        var html = "<h3>" + name + "</h3>";
        html += winHtml;
        infoWin = new T.InfoWindow(html, new T.Point([0, 0]));
        marker.openInfoWindow(infoWin);
    }

    //解析统计城市
    // function statistics(obj) {
    //     if (obj) {
    //         //坐标数组，设置最佳比例尺时会用到
    //         var pointsArr = [];
    //         var priorityCitysHtml = "";
    //         var allAdminsHtml = "";
    //         var priorityCitys = obj.priorityCitys;
    //         if (priorityCitys) {
    //             //推荐城市显示
    //             priorityCitysHtml += "在中国以下城市有结果<ul>";
    //             for (var i = 0; i < priorityCitys.length; i++) {
    //                 priorityCitysHtml += "<li>" + priorityCitys[i].name + "(" + priorityCitys[i].count + ")</li>";
    //             }
    //             priorityCitysHtml += "</ul>";
    //         }
    //
    //         var allAdmins = obj.allAdmins;
    //         if (allAdmins) {
    //             allAdminsHtml += "更多城市<ul>";
    //             for (var i = 0; i < allAdmins.length; i++) {
    //                 allAdminsHtml += "<li>" + allAdmins[i].name + "(" + allAdmins[i].count + ")";
    //                 var childAdmins = allAdmins[i].childAdmins;
    //                 if (childAdmins) {
    //                     for (var m = 0; m < childAdmins.length; m++) {
    //                         allAdminsHtml += "<blockquote>" + childAdmins[m].name + "(" + childAdmins[m].count + ")</blockquote>";
    //                     }
    //                 }
    //                 allAdminsHtml += "</li>"
    //             }
    //             allAdminsHtml += "</ul>";
    //         }
    //         document.getElementById("statisticsDiv").style.display = "block";
    //         document.getElementById("statisticsDiv").innerHTML = priorityCitysHtml + allAdminsHtml;
    //     }
    //     else {
    //         alert("无结果");
    //     }
    // }

    //矩形
    function createRect() {
        var config = {
            color: "blue", //折线颜色
            fillColor: "#fff",    //填充颜色。当参数为空时，折线覆盖物将没有填充效果
            weight: "3", //折线的宽度，以像素为单位
            opacity: 0.5,    //折线的透明度，取值范围0 - 1
            fillOpacity: 0.4,
            lineStyle: "solid" //折线的样式，solid或dashed
        };

        //创建矩形对象
        var rect = new T.Rectangle(bounds, config);
        map.addOverLay(rect);
    }

    //清空地图及搜索列表
    function clearAll() {
        map.clearOverLays();
        document.getElementById("searchDiv").innerHTML = "";
        document.getElementById("resultDiv").style.display = "none";
        document.getElementById("statisticsDiv").innerHTML = "";
        document.getElementById("statisticsDiv").style.display = "none";
    }
    onLoad();
</script>
</body>
</html>